{% extends 'core/_base.html' %}
{% block title %} Customers {% endblock title %}
{% block body %}
<section class="max-w-4xl p-5 mx-auto bg-white rounded-md shadow-md mt-20">
    <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Add Customer</h2>
    
    <form method="POST">
        <!-- Security token -->
            {% csrf_token %}
        <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
            <div>
                <label class="text-gray-700 dark:text-gray-200 font-semibold required" for="customer_name">Customer Name</label>
                <input id="username" type="text" name="customer_name" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" required>
            </div>

            <div>
                <label class="text-gray-700 dark:text-gray-200 font-semibold required" for="customer_email">Customer Email</label>
                <input id="customer_email" type="email" name="customer_email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" required>
            </div>

            <div>
                <label class="text-gray-700 dark:text-gray-200 font-semibold required" for="customer_address">Customer Address</label>
                <input id="customer_address" type="text" name="customer_address" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" required>
            </div>
            

            <div>
                <label class="text-gray-700 dark:text-gray-200 font-semibold required" for="phone_number">Phone Number</label>
                <input id="phone_number" type="textarea" name="phone_number" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" required>
            </div>

        </div>

        <div class="flex justify-end mt-6">
            <button type="submit" class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
        </div>
    </form>
</section>
{% endblock body %}